<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!--
		问题: 因为vue代码是放在js文件中，所以，如果网速慢，vue代码暂时没有下载下来时，用户很可能短暂看到页面上的绑定语法，用户体验不好！
		解决: 有2个办法（v-cloak和v-text）
		(1).用v-cloak暂时隐藏带有{{}}内容的元素,分二步实现:
		1). 在包含绑定语法{{}}的元素上添加v-cloak属性		
		2). 在css中手动添加样式: [v-cloak]{ display:none } 
-->
  <div id="app">
    <h1 v-cloak>Welcome: {{uname}}</h1>
  </div>
  <script>
    //模拟网络加载，延时2秒
    setTimeout(function () {
      var vm = new Vue({
        el: "#app",
        data: {
          uname: "dingding",
        },
      });
    }, 2000);
  </script>
</body>

</html>